<!--
 * @LastEditTime : 2022-11-03 17:24:55
 * @FilePath     : /pyy/src/views/equipment/detail/index.vue
 * @Description  : 设备计量 > 设备计量校准详情
-->
<template>
  <div id="equipment-detail">
    <van-nav-bar title="设备计量校准详情" left-arrow @click-left="goBack" />

    <div class="contaniner">
      <div class="info">
        <div class="title">{{ detailInfo.ywwtfkhmc }}</div>
        <div
          class="info-item"
          v-for="(item, index) in getInfoList()"
          :key="'info-item_' + index"
        >
          <span class="info-item_label">{{ item.label }}：</span>
          <span class="info-item_value">{{ item.value }}</span>
        </div>
      </div>

      <detailed
        v-for="(item, index) in detailInfo.child"
        :key="'detailed_' + index"
        :detail="item"
        :indexNum="index"
        :details="detailInfo"        
      />
    </div>
  </div>
</template>

<script>
import Detailed from "./components/detailed.vue";
import { Toast } from "vant";
import api from "@/http/api";

export default {
  name: "EquipmentDetail",
  components: {
    Detailed,
  },
  data() {
    return {
      detailInfo: {
        clientName: "XXXXXX有限公司",
        consignorW: "郑山",
        principalAddress: "四川省成都市高新区天府大道二段312号",
        principalPhone: "18327712113",
        calibratorName: "四川攀研检测技术有限公司",
        calibratorAddress: "四川省攀枝花市桃源街90号",
        calibratorPhone: "0812-3380591",
        identification: "CNAS",
        toWay: "客户送校",
        require: "否",
        sfjj:'是',
        calibrationMethod: "xxxxxx方法",
        describe: "xxxxxxxx",
        // simplify: "是",
        // contractNo: "HT2022110200001",
        entrustmentDate: "2022-11-02",
        calibrationAmount: "20000000",
        paidAmount: "20000000",
        child: [
          {
            id: "111",
            equipmentName: "XXXX设备1",
            equipmentCode: "XXXXXXX00001",
            specification: "XXXX型号",
            category: "A类",
            num: "2",
            pointName: "测量点1",
            certificationUnit: "XXXXXX公司",
            isAdjustment: "否",
            isRequire: "否",
            isSeal: "是",
            isUrgent: "否",
          },{
            id: "222",
            equipmentName: "XXXX设备2",
            equipmentCode: "XXXXXXX00002",
            specification: "XXXX型号",
            category: "b类",
            num: "200",
            pointName: "测量点aaa",
            certificationUnit: "XXXaaaaXXX公司",
            isAdjustment: "是",
            isRequire: "否",
            isSeal: "是",
            isUrgent: "是",
          },
        ],
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    if ([null, undefined, ""].includes(id)) {
      Toast.fail("参数异常");
      this.goBack();
      return;
    }
    this.getDetail(id);
    setTimeout(() => {
      if(this.$route.query.index){
        var ind = this.$route.query.index
      let toElement = document.getElementsByClassName('detailed')[ind]
      toElement.scrollIntoView({ block: 'center' })
    }
    }, 200);
  },
  methods: {
    /**
     * 返回
     */
    goBack() {
      this.$router.replace({
        name: "Equipment",
      });
    },

    /**
     * 获取 设备计量校准详情
     * @param {string} id:设备计量校准数据列id
     */
    getDetail(id) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .getDetail(id)
        .then((res) => {
          // console.log('列表数据详情res :>> ', res);
          const { code, data, msg } = res.data || {};
          if (code !== 200) {
            Toast.fail(msg || "加载失败");
            return;
          }
          this.detailInfo = data;
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
    },

    /**
     * 获取 展示信息列表
     * @return {Array<{label:"字段名称",value:"字段值"}>} 生成的展示结果
     */
    getInfoList() {
      const enumerate = {
        ywwtr: "客户委托人",
        ywdz: "地址",
        ywdh: "电话",
        jzfmc: "校准方名称",
        jzfdz: "地址",
        jzfdh: "电话",
        rkbs: "认可标识",
        wtztpd:"状态",
        sfjj:'是否加急',
        bjsbsjfs: "送样方式",
        jzbzsfty: "校准标准是否同意",
        khzddjzff: "指定校准方法",
        khysysqtyd: "其它约定",
        // jhhtsp: "简化合同评审",
        // htbm: "合同号",
        wtfwtrq: "委托日期",
        jzfyje: "校准费用金额(元)",
        ssje: "实收金额(元)",
      };

      return Object.keys(enumerate).map((key) => ({
        label: enumerate[key],
        value: this.detailInfo[key],
      }));
    },
  },
};
</script>

<style lang="less" scoped>
#equipment-detail {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }

  .contaniner {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;

    .info {
      width: 100%;
      box-sizing: border-box;
      padding: 16px;
      background: #ffffff;

      .title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #393939;
        position: relative;
        box-sizing: border-box;
        padding-left: 8px;
        margin-bottom: 10px;

        &::before {
          content: " ";
          position: absolute;
          width: 4px;
          height: 18px;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          background: #0e86d1;
        }
      }

      .info-item {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        color: #999999;
        display: flex;

        .info-item_label {
          width: max-content;
          white-space: nowrap;
        }

        .info-item_value {
          width: 0;
          flex: 1;
          color: #393939;
        }
      }
    }
  }
}
</style>
